<h3>类型</h3>
<h4>基本类型</h4>
<div class="example panel panel-body" contenteditable="true">
  默认的.panel所做的只是提供基本的边界和内部，来包含内容。
</div>
<h4>带标题</h4>
<div class="example panel" contenteditable="true">
  <div class="panel-heading">
    面板标题
  </div>
  <div class="panel-body">
    面板内容
  </div>
</div>
<h4>带脚注</h4>
<div class="example panel" contenteditable="true">
  <div class="panel-body">
    面板内容
  </div>
  <div class="panel-footer">
    面板脚注
  </div>
</div>
<h3>变化</h3>
<h4>颜色</h4>
<div class="example" contenteditable="true">
  <div class="panel panel-primary">
    <div class="panel-heading">
      .panel-primary
    </div>
    <div class="panel-body">
      面板内容
    </div>
  </div>
  <div class="panel panel-success">
    <div class="panel-heading">
      .panel-success
    </div>
    <div class="panel-body">
      面板内容
    </div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading">
      .panel-warning
    </div>
    <div class="panel-body">
      面板内容
    </div>
  </div>
  <div class="panel panel-danger">
    <div class="panel-heading">
      .panel-danger
    </div>
    <div class="panel-body">
      面板内容
    </div>
  </div>
  <div class="panel panel-info">
    <div class="panel-heading">
      .panel-info
    </div>
    <div class="panel-body">
      面板内容
    </div>
  </div>
</div>
<h4>包含表格</h4>
<div class="example panel" contenteditable="true">
  <!-- Default panel contents -->
  <div class="panel-heading">
    Panel heading
  </div><!-- Table -->
  <table class="table">
    <thead>
      <tr>
        <th>Lorem ipsum.</th>
        <th>Repudiandae, harum!</th>
        <th>Tenetur, corporis.</th>
        <th>Perspiciatis, porro?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum.</td>
        <td>Officiis, non.</td>
        <td>Molestias, qui.</td>
        <td>Odit, ducimus.</td>
      </tr>
      <tr>
        <td>Lorem ipsum.</td>
        <td>Repellendus, exercitationem!</td>
        <td>Velit, eos.</td>
        <td>Eius, officiis.</td>
      </tr>
      <tr>
        <td>Lorem ipsum.</td>
        <td>Amet, esse!</td>
        <td>Quis, pariatur!</td>
        <td>Totam, quae.</td>
      </tr>
    </tbody>
  </table>
</div>
<h4>包含列表</h4>
<div class="example panel" contenteditable="true">
  <div class="panel-heading">
    Panel heading
  </div>
  <ul class="list-group">
    <li class="list-group-item">todo</li>
    <li class="list-group-item">story</li>
    <li class="list-group-item">task</li>
    <li class="list-group-item">bug</li>
    <li class="list-group-item">case</li>
  </ul>
</div>
<h4>面板组</h4>
<div class="example panel-group" contenteditable="true">
  <div class="panel">
    <div class="panel-heading">
      面板标题
    </div>
    <div class="panel-body">
      面板内容
    </div>
    <div class="panel-footer">
      面板脚注
    </div>
  </div>
  <div class="panel">
    <div class="panel-heading">
      面板标题
    </div>
    <div class="panel-body">
      面板内容
    </div>
    <div class="panel-footer">
      面板脚注
    </div>
  </div>
  <div class="panel">
    <div class="panel-heading">
      面板标题
    </div>
    <div class="panel-body">
      面板内容
    </div>
    <div class="panel-footer">
      面板脚注
    </div>
  </div>
</div>
